<template lang="pug">
  .page
    .lzw-section
      .tab-title
        .font-14(v-for="(item,index) in filterNav" :key="index" @click="filterMethod(index,$event)" :data-status="item.status" :class="tabIndex === index ? 'active' : ''") {{item.txt}}
      .tab-container.pt-20
        .handle-box.clearfix.pr-20.pl-20
          .pull-left
          .pull-right
            template(v-if="tabIndex === 0")
              Button.mybtn-2(type="info" @click="").ml-15 数据导入
              Button.mybtn-2(type="info" @click="").ml-15 检查数据
              Button.mybtn-2(type="info" @click="").ml-15 清空
        .pall-20
          Table.beautiful-table(width="100%" stripe :columns="thead" :data="listData" :loading="loading" @on-selection-change="tableSelectChange")
            template(slot-scope="{ row, index }" slot="action")
              Button.mr-10(type="text" size="small" @click="completeFn(row.id)") 完成订单
            .clearfix.pl-20.pr-20(slot="footer")
              Page(:total="totalcount" :current="pageIndex" :page-size="pageSize" @on-change="pageChange" show-total)
</template>

<script>
import vOrderApi from '@/api/v_order.api.js'

export default {
  name: 'v_order',
  components: {
  },
  data () {
    return {
      tabIndex: 0,
      status: '0',
      loading: false,
      totalcount: 0,
      pageIndex: 1,
      pageSize: 10,
      filterNav: [
        {
          txt: '本批次订单完成数据',
          status: '0'
        },
        {
          txt: '历史批次订单完成数据',
          status: '1'
        }
      ],
      ids: [],
      listData: [],
      thead: [
        {
          type: 'selection',
          width: 60,
          fixed: 'left'
        },
        {
          align: 'center',
          title: '订单批次编号',
          minWidth: 160,
          key: 'orderBatch'
        },
        {
          align: 'center',
          title: '姓名',
          minWidth: 90,
          key: 'employeeName'
        },
        {
          align: 'center',
          title: '身份证',
          minWidth: 190,
          key: 'idCardNo'
        },
        {
          align: 'center',
          title: '订单编号',
          minWidth: 160,
          key: 'orderNumber'
        },
        {
          align: 'center',
          title: '订单名称',
          minWidth: 120,
          key: 'name'
        },
        {
          align: 'center',
          title: '所属企业',
          minWidth: 150,
          key: 'customerName'
        },
        {
          align: 'center',
          title: '订单服务单价',
          minWidth: 90,
          key: 'commission'
        },
        {
          align: 'center',
          title: '订单服务单价费率(%)',
          minWidth: 90,
          key: 'commissionRate'
        },
        {
          align: 'center',
          title: '到手订单单价',
          minWidth: 90,
          key: 'getInCommission'
        },
        {
          align: 'center',
          title: '订单完成数量',
          minWidth: 90,
          key: 'orderCompleteNum'
        },
        {
          align: 'center',
          title: '到手总佣金',
          minWidth: 90,
          key: 'getInCommissionSum'
        },
        {
          align: 'center',
          title: '是否完成',
          minWidth: 90,
          key: 'completeStatusName'
        },
        {
          align: 'center',
          title: '操作',
          minWidth: 90,
          slot: 'action'
        }
      ]
    }
  },
  mixins: [],
  created () {
    this.getList()
  },
  methods: {
    filterMethod (index,e) {
      this.tabIndex = index
      this.status = e.target.dataset.status
      this.getList()
    },
    // 获取列表
    getList () {
      vOrderApi.GetVOrderCompleteList({
        CompleteStatus : this.status,
        PageIndex: this.pageIndex,
        PageSize: this.pageSize
      }).then(res => {
        if (res.data.success) {
          this.listData = res.data.data
          this.totalcount = res.data.totalRows
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    completeFn (id) {
      vOrderApi.VOrderComplete({
        CompeleteID: id
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.getList()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    tableSelectChange (val) {
      this.ids = val.map(item => {
        return item.id
      })
    },
    pageChange (index) {
      this.pageIndex = index
    },
  }

}
</script>

<style lang="less">

</style>
